<template>
  <div class="height-100-per width-100-per">
    <div class="padding-20-px layout-center-top">
      <div class="layout-left-top">
        <div class="layout-left-top padding-10-px" style="width: 800px;border: 1px solid #d9d9d9; border-radius: 4px;">
          <span style="font-size: 30px;">维修申请信息</span>
          <a-divider/>
          <div class="layout-left-top" style="width: 350px;">
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">门牌号:</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repCode"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修人员:</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarId"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修区域:</span>
              <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.loctionId">
                <a-select-option value="999">请选择</a-select-option>
                <a-select-option v-for="(i,index) in repLocationData" :value="i.key" :key="index">{{i.title}}</a-select-option>
              </a-select>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修类别:</span>
              <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.repTypeId">
                <a-select-option value="999">请选择</a-select-option>
                <a-select-option v-for="(i,index) in repTypeIdData" :value="i.key" :key="index">{{i.title}}</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="layout-left-top" style="width: 400px">
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">联系电话:</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarIdP"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修时间:</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStatTime"></a-input>
            </div>
            <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修备注:</span>
              <a-textarea :disabled="disabled" class="" style="width: 321px" placeholder="报修备注" :rows="3" v-model="repairData.repRemarkStar"/>
            </div>
          </div>
          <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
            <span class="formSpan">报修图片:</span>
            <div style="width: 700px;height: 150px;overflow: auto;border: 1px solid rgb(217, 217, 217)" class="layout-left-top">
              <div class="clearfix layout-left-top padding-10-px">
                <a-upload
                  accept="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  :fileList="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <!--                  :remove="removeImg"-->
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </div>
          </div>
        </div>
        <div class="padding-10-px" style="width: 800px;border: 1px solid #d9d9d9; border-radius: 4px;">
          <span style="font-size: 30px;">维修信息</span>
          <a-divider/>
          <div class="layout-left-top">
            <div>
              <div class="layout-left-center" style="margin-bottom: 20px;">
                <span class="formSpan">维修人:</span>
                <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndId"/>
              </div>
              <div class="layout-left-center" style="margin-bottom: 20px;">
                <span class="formSpan">维修电话:</span>
                <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndIdP"/>
              </div>
              <div class="layout-left-center" style="margin-bottom: 20px;">
                <span class="formSpan">完工时间:</span>
                <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndTime"/>
              </div>
            </div>
            <div class="layout-left-top margin-left-20-px">
              <span class="formSpan">完工备注:</span>
              <a-textarea :disabled="disabled" style="width: 321px" placeholder="完工备注" :rows="6" v-model="repairData.repRemarkEnd"/>
            </div>
          </div>
          <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
            <span class="formSpan">维修材料:</span>
            <div class="layout-center padding-10-px" style="width: calc(100% - 140px);border: 1px solid rgb(217, 217, 217);margin-bottom: 9px;">
              <div style="max-height: 200px" class="overflow-auto width-100-per">
                <div class="layout-left-top width-100-per margin-bottom-10-px" v-for="(i,index) in repairData.materials" :key="index">
                  <span style="margin-right: 20px;width:50px; ">材料{{index++}}</span>
                  <div class="layout-side margin-top-10-px margin-bottom-10-px">
                    <span class="formSpan">材料名称:</span>
                    <a-tree-select
                      :disabled="disabled"
                      class="formInput"
                      :treeData="materialDatas"
                      treeDefaultExpandAll
                      @select="onSelect"
                      v-model="i.matId"
                    >
                    </a-tree-select>
                  </div>
                  <div class="layout-side margin-top-10-px margin-bottom-10-px">
                    <span class="formSpan">数量:</span>
                    <a-input :disabled="disabled" class="formInput" v-model="i.matRecordNum"></a-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layout-left-top " style="margin-bottom: 20px;">
            <span class="formSpan">完工图片:</span>
            <div style="width: 700px;height: 150px;overflow: auto;border: 1px solid rgb(217, 217, 217)" class="layout-left-top">
              <div class="clearfix layout-left-top padding-10-px">
                <a-upload
                  accept="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  :fileList="fileLists"
                  @preview="handlePreviews"
                  @change="handleChanges"
                >
                  <!--                  :remove="removeImg"-->
                </a-upload>
                <a-modal :visible="previewVisibles" :footer="null" @cancel="handleCancels">
                  <img alt="example" style="width: 100%" :src="previewImages" />
                </a-modal>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br/>
    <div class="width-100-per layout-center-top">
      <router-view></router-view>
    </div>
  </div>
<!--  <div class="height-100-per width-100-per layout-left-top">-->
<!--    <div class="width-100-per height-100-per overflow-auto padding-20-px" style="width: 840px;">-->
<!--      <div class="layout-left-top padding-10-px" style="width: 800px;border: 1px solid #d9d9d9; border-radius: 4px;">-->
<!--        <span style="font-size: 30px;">维修申请信息</span>-->
<!--        <a-divider/>-->
<!--        <div class="layout-left-top" style="width: 350px;">-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">门牌号:</span>-->
<!--            <a-input :disabled="disabled" class="formInput" v-model="repairData.repCode"></a-input>-->
<!--          </div>-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">报修人员:</span>-->
<!--            <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarId"></a-input>-->
<!--          </div>-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">报修区域:</span>-->
<!--            <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.loctionId">-->
<!--              <a-select-option value="999">请选择</a-select-option>-->
<!--              <a-select-option v-for="(i,index) in repLocationData" :value="i.key" :key="index">{{i.title}}</a-select-option>-->
<!--            </a-select>-->
<!--          </div>-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">报修类别:</span>-->
<!--            <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.repTypeId">-->
<!--              <a-select-option value="999">请选择</a-select-option>-->
<!--              <a-select-option v-for="(i,index) in repTypeIdData" :value="i.key" :key="index">{{i.title}}</a-select-option>-->
<!--            </a-select>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="layout-left-top" style="width: 400px">-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">联系电话:</span>-->
<!--            <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarIdP"></a-input>-->
<!--          </div>-->
<!--          <div class="layout-side margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">报修时间:</span>-->
<!--            <a-input :disabled="disabled" class="formInput" v-model="repairData.repStatTime"></a-input>-->
<!--          </div>-->
<!--          <div class="layout-left-top margin-bottom-10-px margin-top-10-px">-->
<!--            <span class="formSpan">报修备注:</span>-->
<!--            <a-textarea :disabled="disabled" class="" style="width: 321px" placeholder="报修备注" :rows="3" v-model="repairData.repRemarkStar"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="layout-left-top margin-bottom-10-px margin-top-10-px">-->
<!--          <span class="formSpan">报修图片:</span>-->
<!--          <div style="width: 700px;height: 150px;overflow: auto;border: 1px solid rgb(217, 217, 217)" class="layout-left-top">-->
<!--            <div class="clearfix layout-left-top padding-10-px">-->
<!--              <a-upload-->
<!--                accept="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--                listType="picture-card"-->
<!--                :fileList="fileList"-->
<!--                @preview="handlePreview"-->
<!--                @change="handleChange"-->
<!--              >-->
<!--                &lt;!&ndash;                  :remove="removeImg"&ndash;&gt;-->
<!--              </a-upload>-->
<!--              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">-->
<!--                <img alt="example" style="width: 100%" :src="previewImage" />-->
<!--              </a-modal>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="padding-10-px" style="width: 800px;border: 1px solid #d9d9d9; border-radius: 4px;">-->
<!--        <span style="font-size: 30px;">维修信息</span>-->
<!--        <a-divider/>-->
<!--        <div class="layout-left-top">-->
<!--          <div>-->
<!--            <div class="layout-left-center" style="margin-bottom: 20px;">-->
<!--              <span class="formSpan">维修人:</span>-->
<!--              <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndId"/>-->
<!--            </div>-->
<!--            <div class="layout-left-center" style="margin-bottom: 20px;">-->
<!--              <span class="formSpan">维修电话:</span>-->
<!--              <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndIdP"/>-->
<!--            </div>-->
<!--            <div class="layout-left-center" style="margin-bottom: 20px;">-->
<!--              <span class="formSpan">完工时间:</span>-->
<!--              <a-input :disabled="disabled" class="formInput" v-model="repairData.repEndTime"/>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="layout-left-top margin-left-20-px">-->
<!--            <span class="formSpan">完工备注:</span>-->
<!--            <a-textarea :disabled="disabled" style="width: 321px" placeholder="完工备注" :rows="6" v-model="repairData.repRemarkEnd"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="layout-left-top margin-bottom-10-px margin-top-10-px">-->
<!--          <span class="formSpan">维修材料:</span>-->
<!--          <div class="layout-center padding-10-px" style="width: calc(100% - 140px);border: 1px solid rgb(217, 217, 217);margin-bottom: 9px;">-->
<!--            <div style="max-height: 200px" class="overflow-auto width-100-per">-->
<!--              <div class="layout-left-top width-100-per margin-bottom-10-px" v-for="(i,index) in repairData.materials" :key="index">-->
<!--                <span style="margin-right: 20px;width:50px; ">材料{{index++}}</span>-->
<!--                <div class="layout-side margin-top-10-px margin-bottom-10-px">-->
<!--                  <span class="formSpan">材料名称:</span>-->
<!--                  <a-tree-select-->
<!--                    :disabled="disabled"-->
<!--                    class="formInput"-->
<!--                    :treeData="materialDatas"-->
<!--                    treeDefaultExpandAll-->
<!--                    @select="onSelect"-->
<!--                    v-model="i.matId"-->
<!--                  >-->
<!--                  </a-tree-select>-->
<!--                </div>-->
<!--                <div class="layout-side margin-top-10-px margin-bottom-10-px">-->
<!--                  <span class="formSpan">数量:</span>-->
<!--                  <a-input :disabled="disabled" class="formInput" v-model="i.matRecordNum"></a-input>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="layout-left-top " style="margin-bottom: 20px;">-->
<!--          <span class="formSpan">完工图片:</span>-->
<!--          <div style="width: 700px;height: 150px;overflow: auto;border: 1px solid rgb(217, 217, 217)" class="layout-left-top">-->
<!--            <div class="clearfix layout-left-top padding-10-px">-->
<!--              <a-upload-->
<!--                accept="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--                listType="picture-card"-->
<!--                :fileList="fileLists"-->
<!--                @preview="handlePreviews"-->
<!--                @change="handleChanges"-->
<!--              >-->
<!--                &lt;!&ndash;                  :remove="removeImg"&ndash;&gt;-->
<!--              </a-upload>-->
<!--              <a-modal :visible="previewVisibles" :footer="null" @cancel="handleCancels">-->
<!--                <img alt="example" style="width: 100%" :src="previewImages" />-->
<!--              </a-modal>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div style="width: calc(100% - 840px);min-width: 600px">-->
<!--      <router-view></router-view>-->
<!--    </div>-->
<!--  </div>-->

</template>

<script>
  import {Input,TreeSelect,Select,Upload,Modal,Divider,DatePicker} from 'ant-design-vue'
  import {indexConfig} from '../IndexConfig'

  export default {
    name: "Index",
    components:{
      AUpload:Upload,
      AInput:Input,
      ASelect:Select,
      ASelectOption:Select.Option,
      ATextarea:Input.TextArea,
      AModal:Modal,
      ADivider:Divider,
      ADatePicker:DatePicker,
      ATreeSelect:TreeSelect,
    },
    data(){
      return{
        removeImg:false,
        materialDatas:[],
        removes:false,
        previewVisible:false,
        previewImage:'',
        fileList:[],
        previewVisibles:false,
        previewImages:'',
        fileLists:[],
        disabled:true,
        repLocationData:indexConfig.repLocationData,
        repTypeIdData:indexConfig.repTypeIdData,
        repairData:{
          repCode:'169002303',
          repStarId:'张三',
          repStarIdP:'15736611434',
          // repImgStar:[],
          repImgStar:["",
            ""],
          repStatTime:'2019-09-22/9:00',
          repRemarkStar:'无',
          repStarP:'123456',
          repTypeId:1,
          loctionId:1,
          materials:[
            { matId:'0-0',matRecordNum:'1',},
            { matId:'0-2',matRecordNum:'1',},
            { matId:'1-1',matRecordNum:'1',}
          ],
          repEndTime:'2019-10-06',
          repRemarkEnd:'333',
          repEndId:'张三',
          repEndIdP:'张三',
          repImgEnd:["",
            ""],
        },
      }
    },
    watch:{

    },
    mounted() {
      console.log('***',this.$route.query.id)
      this.findStarID(this.$route.query.id);
      this.showMaterialTreeData();
      for(let i in this.repairData.repImgStar){
        this.fileList.push({
          uid: i,
          name: i + '.png',
          status: 'done',
          url: this.repairData.repImgStar[i],
        })
      }
      for(let i in this.repairData.repImgEnd){
        this.fileLists.push({
          uid: i,
          name: i + '.png',
          status: 'done',
          url: this.repairData.repImgEnd[i],
        })
      }

      this.routerSkip("",{id:this.$route.query.id});
    },
    methods:{

      //树组装
      dataTreeDg(pt, tree) {
        const that = this;
        let newRR = [];
        for (let t of tree) {
          if (pt.key === t.parentId) {
            let ct = that.dataTreeDg(t, tree);
            if (ct.length !== 0) {
              newRR.push({
                title: t.title,
                key: t.key,
                value:t.key,
                disabled:t.disabled,
                children: ct,
              });
            } else {
              newRR.push({
                title: t.title,
                key: t.key,
                value:t.key,
                disabled:t.disabled,
              });
            }
          }
        }
        return newRR;
      },
      //组装材料树
      showMaterialTrees(tree){
        const that = this;
        const newTree = [];
        for (let r of tree) {
          if (r.parentId === '999') {
            let ct = that.dataTreeDg(r, tree);
            if (ct.length !== 0) {
              newTree.push({
                title: r.title,
                key: r.key,
                value:r.key,
                disabled:r.disabled,
                children: that.dataTreeDg(r, tree)
              })
            } else {
              newTree.push({
                title: r.title,
                key: r.key,
                value:r.key,
                disabled:r.disabled,
              })
            }
          }
        }
        that.materialDatas=[{
          title: '材料总览',
          key: '999',
          value:'999',
          disabled:true,
          children:newTree
        }]
        console.log(that.materialDatas)
      },
      //材料树
      showMaterialTreeData(){
        const that = this;
        let AllMaterialTypes=[];
        let AllMaterials=[];
        that.$apollo.query({
          query:require('../../../graphql/material/query/findAllMaterialType.gql'),
          variables:{},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findAllMaterialType = data.data.findAllMaterialType;
          for(let i in findAllMaterialType){
            AllMaterialTypes.push({
              key:findAllMaterialType[i].id,
              title:findAllMaterialType[i].matTypeName,
              parentId:findAllMaterialType[i].matTypeParentId,
              disabled:true
            })
          }
          that.$apollo.query({
            query: require('../../../graphql/material/query/findAllMaterial.gql'),
            variables: {},
            fetchPolicy: 'no-cache'
          }).then(datas => {
            const findAllMaterial=datas.data.findAllMaterial;
            for(let j in findAllMaterial){
              AllMaterials.push({
                key:findAllMaterial[j].id,
                title:findAllMaterial[j].matName,
                parentId:findAllMaterial[j].matParengId,
                disabled:false
              })
            }
            const treeR = AllMaterialTypes.concat(AllMaterials);
            that.showMaterialTrees(treeR);
          }).catch(error=>{
            console.log(error)
          })
        }).catch(error=>{
          console.log(error)
        })
      },
      //用户名查询
      findUserName(e,i){
        const that = this;
        this.$apollo.query({
          query:require('../../../graphql/army/query/findUserById.gql'),
          variables:{id:e},
          fetchPolicy:'no-cache'
        }).then((datas)=>{
          const findUserById = datas.data.findUserById;
          if(i === '1'){
            that.repairData.repStarId = findUserById.name;
          }else if(i==='2'){
            that.repairData.repEndId = findUserById.name;
          }else {
            that.repairData.repEndIdP = findUserById.phone;
          }
        }).catch((error)=>{
          console.log(error)
        })
      },
      //初始数据加载
      findStarID(id){
        const that = this;
        that.$apollo.query({
          query:require('../../../graphql/repair/query/findRepairByIdAll.gql'),
          variables:{id},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findRepairById=data.data.findRepairById;
          // console.log(findRepairById)
          that.repairData.repCode = findRepairById.repCode;
          that.findUserName(findRepairById.repStarId,'1');
          that.findUserName(findRepairById.repEndId,'2');
          that.findUserName(findRepairById.repEndId,'3');
          that.repairData.repStarIdP = findRepairById.repStarIdP;
          // that.repairData.repImgStar=[]
          // that.repairData.repImgEnd=[]
          that.repairData.repStatTime=findRepairById.repStatTime;
          that.repairData.repEndTime = findRepairById.repEndTime;
          that.repairData.repRemarkStar = findRepairById.repRemarkStar;
          that.repairData.repRemarkEnd = findRepairById.repRemarkEnd;
          that.repairData.repTypeId=findRepairById.repTypeId;
          that.repairData.loctionId=findRepairById.loctionId;
          that.repairData.materials=findRepairById.materialRecordId;
        }).catch(error=>{
          console.log(error)
        })
      },
      //材料选择
      onSelect(value,node){
        // this.materialValue = value
      },
      handleCancel() {
        this.previewVisible = false;
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl;
        this.previewVisible = true;
      },
      handleChange({ fileList }) {
        this.fileList = fileList;
      },
      handleCancels() {
        this.previewVisibles = false;
      },
      handlePreviews(file) {
        this.previewImages = file.url || file.thumbUrl;
        this.previewVisibles = true;
      },
      handleChanges({ fileList }) {
        this.fileLists = fileList;
      },
    }
  }
</script>

<style scoped>
  .imgS{
    width: 200px;
    height: 200px;
    background: #1890FF;
    margin: 10px
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

</style>
